js

ES6学习记录 part1

对于es6的学习总结

Posted by AzirKxs on 2021-09-14
Estimated Reading Time 3 Minutes
Words 687 In Total
Viewed Times

1.let 与 const

学过了~

2.解构赋值

①数组的解构赋值

1
2
3
4
5
6
7
8
9
let [a,b,c] = [1,2,3];//依次为a,b,c赋值为1,2,3

let [one,,three] = [1,2,3]//one =1;three =3

let [top1, ...bottom] = [1,2,3,4];//top1 = 1 ; bottom = [2,3,4]

let [x, y, ...z] = ['a']; //x = a; y = undefined; z = [];

let [first,seconed] = [1];//解构失败,都为undefined

可以设置默认值

1
2
3
let [defaultValue = 'yes'] = []; //defaultValue = yes;

let [defaultValue2 = 'yes'] = [null]; defaultValue2 = null;//当一个数组成员严格等于undefined,默认值才会生效
1
2
3
4
5
6
7
8
9
function f() {

console.log('aaa');

}

let [x1 = f()] = [1];

// 在这种情况下f()不会执行,只有当需要采取默认值的时候才会执行f();

②对象的解构赋值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
//数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。解构失败值为undefined



let {aaa,bbb,ccc} = {aaa:'a',ccc:'c',bbb:'b'};



const KXS = {

name: 'azirkxs',

age: 21,

play: function(){

console.log('happy game');

}

}



let {name,age,play} = KXS; //此处的变量名必须与对象中的属性名一致

console.log(name);

console.log(age);

play();

3.模板字符串

申明:使用``包裹,使用${变量名}引用变量

特性: ①可以保留换行符(回车) ②变量拼接

示例:

1
2
3
4
5
let azir = '阿兹尔';

let info = `${azir}是恕瑞玛的皇帝`;

console.log(info);

4.对象的简化写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
//在学习框架阅读框架源码的时候可能会出现这种降低可读性的写法!

let zed = '劫';

const R = function(){

console.log("劫使用了大招");

}



let game = {

zed, // zed = zed

R,// R = R;

die(){ // die =function()

console.log("劫死了");

}

}

console.log(game.zed,game.R);

game.die();

5.箭头函数

声明:func = (函数参数) = >{方法体}

箭头函数的特性:

①this是静态的,this始终指向函数声明时所在作用域下this的值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
window.name = 'azirkxs';

const nickname = {

name: '勤勉的阿库希斯教徒'

}



let getName0 = function(){

console.log(this.name);

}



let getName1 =() =>{

console.log(this.name);

}

getName0.call(nickname);

getName1.call(nickname);

未调用call方法时,this都指向了window的name属性,调用了call方法之后,普通函数的this指向了nickname,而箭头函数的this仍指向window.因此在调用了call方法后getName0输出勤勉的阿库希斯教徒,getName1输出azirkxs

②不能作为构造函数实例化对象

③不能使用arguments变量

④当函数体的语句只有一条时,可以省略花括号和return

1
let add = a => a+a;

6.函数默认值

1
2
3
4
5
6
7
8
9
//ES6允许为形参赋默认值

function test(a,b,c=10){

return a + b +c;

}

console.log(test(1,2));//13

如果这篇文章对你有帮助,可以bilibili关注一波 ~ !此外,如果你觉得本人的文章侵犯了你的著作权,请联系我删除~谢谢!